<template>
  <div class="body">
    <section class="index-banner">
      <div class="index-bannerMain clearfix center-block">
        <div class="index-title pull-left">
          <h2>工程建设中介服务平台</h2>
        </div>
      </div>
    </section>

    <section class="agencyTop">
      <div class="center-block">
        <h4 class="title">数量统计</h4>
        <ul class="renyShu-in">
          <li>
            <p>
              <span>26,028</span>项
            </p>
            <p>市中介服务事项</p>
          </li>
          <li>
            <p>
              <span>10,543</span>个
            </p>
            <p>省中介机构</p>
          </li>
          <li>
            <p>
              <span>178</span>个
            </p>
            <p>省中介服务资质</p>
          </li>
          <li>
            <p>
              <span>2028</span>个
            </p>
            <p>市项目业主</p>
          </li>
          <li>
            <p>
              <span>288</span>个
            </p>
            <p>市采购公告</p>
          </li>
          <li>
            <p>
              <span>288</span>个
            </p>
            <p>市中选结果</p>
          </li>
          <li>
            <p>
              <span>288</span>个
            </p>
            <p>市签订合同</p>
          </li>
        </ul>
      </div>
    </section>

    <section class="agency_box white">
      <div class="center-block">
        <h3 class="circular-title">数量统计</h3>
        <div class="stat_charts clearfix">
          <div class="chartBox">
            <h3 class="blue-title">中介服务事项</h3>
            <div class="chartOne">
              <!--echarts1-->
              <pieChart id="barOne" />
            </div>
          </div>
          <div class="chartBox">
            <h3 class="blue-title">中介机构分布</h3>
            <div class="chartTwo">
              <!--echarts2-->
              <MapChart id="agencyMap" :data="echartComData.typeList" />
            </div>
          </div>
          <div class="chartBox">
            <h3 class="blue-title">中介机构单位性质</h3>
            <div class="chartThree">
              <!--echarts3-->
              <pieChart id="barTwo" />
            </div>
          </div>
          <div class="chartBox">
            <h3 class="blue-title">服务类型</h3>
            <div class="chartFour">
              <!--echarts4-->
              <barChart />
            </div>
          </div>
          <div class="chartBox">
            <h3 class="blue-title">中介机构数量</h3>
            <div class="chartFive">
              <!--echarts5-->
              <pieChart id="barThree" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="agency_box">
      <div class="center-block">
        <h3 class="circular-title">
          评审公示
          <a href="/html/agency/reviewList.html">查看更多 ></a>
        </h3>
        <div id="table1" class="MainTable">
          <table class="table m_c_table" width="100%" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <th width="60px">序号</th>
                <th width="400px">项目名称</th>
                <th width="250px">事项名称</th>
                <th width="230px">评审发起人</th>
                <th width="120px">评审模式</th>
                <th>发起日期</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>安徽省合肥市高新区创新产业园2期德拓科技办公楼施工总承包1标段安徽省合肥市高新区创新产业园2期德拓科技办公楼施工总承包1标段安徽省合肥市高新区创新产业园2期德拓科技办公楼施工总承包1标段安徽省合肥市高新区创新产业园2期德拓科技办公楼施工总承包1标段</td>
                <td>社会稳定风险评估(重大项目)</td>
                <td>南昌市西湖区行政审批服务局</td>
                <td>线上函审</td>
                <td>2019-03-13</td>
              </tr>
              <tr>
                <td>2</td>
                <td>房山区河北镇棚户区改造水泥一厂片区土地开发项目</td>
                <td>社会稳定风险评估(重大项目)</td>
                <td>南昌市西湖区行政审批服务局</td>
                <td>线上函审</td>
                <td>2019-03-13</td>
              </tr>
              <tr>
                <td>3</td>
                <td>房山区河北镇棚户区改造水泥一厂片区土地开发项目</td>
                <td>社会稳定风险评估(重大项目)</td>
                <td>南昌市西湖区行政审批服务局</td>
                <td>线上函审</td>
                <td>2019-03-13</td>
              </tr>
              <tr>
                <td>4</td>
                <td>房山区河北镇棚户区改造水泥一厂片区土地开发项目</td>
                <td>社会稳定风险评估(重大项目)</td>
                <td>南昌市西湖区行政审批服务局</td>
                <td>线上函审</td>
                <td>2019-03-13</td>
              </tr>
              <tr>
                <td>5</td>
                <td>房山区河北镇棚户区改造水泥一厂片区土地开发项目</td>
                <td>社会稳定风险评估(重大项目)</td>
                <td>南昌市西湖区行政审批服务局</td>
                <td>线上函审</td>
                <td>2019-03-13</td>
              </tr>
            </tbody>
          </table>
          <div style="padding: 20px 0">
            <div class="fenYe clearfix">
              <div class="fenYeL">
                <span>共400条</span>
                <select class="fenYeSelect">
                  <option value="100">10条/页</option>
                  <option value="100">20条/页</option>
                  <option value="100">30条/页</option>
                  <option value="100">40条/页</option>
                  <option value="100">50条/页</option>
                  <option value="100">100条/页</option>
                </select>
              </div>
              <div class="input_sub">
                <span>前往</span>
                <input type="text" />
                <span>页</span>
                <button>确认</button>
              </div>
              <ul class="clearfix">
                <li>
                  <a href>1</a>
                </li>
                <li class="active">
                  <a href>2</a>
                </li>
                <li>
                  <a href>3</a>
                </li>
                <li>
                  <a href>4</a>
                </li>
                <li>
                  <a href>5</a>
                </li>
                <li>...</li>
                <li>
                  <a href>90</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <h3 class="circular-title">
          中介入驻
          <a href="#">查看更多 ></a>
        </h3>
        <div id="table2" class="MainTable">
          <table class="table m_c_table" width="100%" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <th width="420px">机构名称</th>
                <th width="220px">统一社会信用代码</th>
                <th width="420px">服务类型</th>
                <th>入住时间</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>南昌市西湖区大志工程测绘技术服务有限公司</td>
                <td>91361000MA360TM31B</td>
                <td>
                  <dl class="table-tag">
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                  </dl>
                </td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市西湖区大志工程测绘技术服务有限公司</td>
                <td>91361000MA360TM31B</td>
                <td>
                  <dl class="table-tag">
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                  </dl>
                </td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市西湖区大志工程测绘技术服务有限公司</td>
                <td>91361000MA360TM31B</td>
                <td>
                  <dl class="table-tag">
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                  </dl>
                </td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市西湖区大志工程测绘技术服务有限公司</td>
                <td>91361000MA360TM31B</td>
                <td>
                  <dl class="table-tag">
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                  </dl>
                </td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市西湖区大志工程测绘技术服务有限公司</td>
                <td>91361000MA360TM31B</td>
                <td>
                  <dl class="table-tag">
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                    <dd class="o">咨询评估</dd>
                    <!--orange-->
                    <dd class="b">规划设计</dd>
                    <!--blue-->
                  </dl>
                </td>
                <td>2019-05-02</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <section class="agency_box white">
      <div class="center-block">
        <div class="QuaT center-block">
          <h3 class="circular-title">政策法规</h3>
          <div id="QuaTle1" class="QuaTle blockSelect">
            <span
              @click="activeTab(index)"
              :class="{active:index==idx}"
              v-for="(item,index) in guidLisd"
              :key="index"
            >{{item}}</span>
          </div>
        </div>
        <div id="QuaBoy1" class="MainTable QuaBoy">
          <section :class="idx==0?'active':''" id="table3">
            <table class="table m_c_table" width="100%" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-02</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-02</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-02</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-02</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-02</td>
                </tr>
              </tbody>
            </table>
          </section>

          <section :class="idx==1?'active':''">
            <table class="table m_c_table" width="100%" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td>
                    <a href="javascript:;">《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-03</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-04</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-05</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-06</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-07</td>
                </tr>
              </tbody>
            </table>
          </section>

          <section :class="idx==2?'active':''">
            <table class="table m_c_table" width="100%" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td>
                    <a href="javascript:;">南昌市人民政府关于印发《XXX》的通知</a>
                  </td>
                  <td>2019-05-11</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-12</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-13</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-14</td>
                </tr>
                <tr>
                  <td>
                    <a
                      href="javascript:;"
                    >南昌市人民政府关于印发《南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</a>
                  </td>
                  <td>2019-05-15</td>
                </tr>
              </tbody>
            </table>
          </section>
        </div>

        <div class="QuaT center-block">
          <h3 class="circular-title">下载专区</h3>
          <div id="QuaTle2" class="QuaTle blockSelect">
            <span
              @click="activeTwo(index)"
              :class="{active:index==idT}"
              v-for="(item,index) in downList"
              :key="index"
            >{{item}}</span>
          </div>
        </div>
        <div id="QuaBoy2" class="agency_download QuaBoy">
          <section :class="idx==0?'active':''" id="downloadList">
            <ul class="download-list clearfix">
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V2.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
            </ul>
          </section>
          <section :class="idx==1?'active':''">
            <ul class="download-list clearfix">
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
            </ul>
          </section>
          <section :class="idx==2?'active':''">
            <ul class="download-list clearfix">
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V4.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
            </ul>
          </section>
          <section :class="idx==3?'active':''">
            <ul class="download-list clearfix">
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V5.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import barChart from "@/views/dataService/charts/barChart";
import pieChart from "@/views/dataService/charts/pieChart";
import MapChart from "@/views/dataService/charts/comMap";
import { getMap } from "@/api/dataService/index";

export default {
  name: "index",
  components: {
    barChart,
    pieChart,
    MapChart
  },
  data() {
    return {
      idx: 0,
      idT: 0,
      echartComData: {
        typeList: []
      },
      // 政策法规标题
      guidLisd: ["法律法规", "规章制度", "管理办法"],
      // 下载专区标题
      downList: ["平台指南", "合同模板", "申请表单", "其他材料"]
    };
  },
  mounted() {
    this.getMap();
  },
  methods: {
    getMap(data) {
      getMap(data).then(res => {
        this.echartComData.typeList = res.obj;
        // console.log(this.echartComData)
      });
    },
    // 点击切换01
    activeTab(num) {
      this.idx = num;
    },
    activeTwo(id){
      this.idT = id;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
@import "../../../assets/css/agency.css";
</style>
